<template>
  <el-form @submit.prevent :model="model" v-bind="_options" ref="formRef">
    <template v-for="(item, index) in fieldList" :key="index">
      <!-- 单选框 -->
      <el-form-item :label="item.label" v-if="item.type === 'radio'">
        <el-radio-group v-model="model[item.field]" :disabled="item.disabled">
          <el-radio
            :label="val[item.options?.valueKey || 'value']"
            size="large"
            v-for="val in item.options?.data"
            :key="val[item.options?.labelKey || 'label']"
            >{{ val[item.options?.labelKey || "label"] }}</el-radio
          >
        </el-radio-group>
      </el-form-item>
      <!-- 复选框 -->
      <el-form-item
        :label="item.label"
        v-else-if="item.type === 'checkbox'"
        :rules="item.rules"
        :prop="[item.field]"
      >
        <el-checkbox-group
          v-model="model[item.field]"
          :disabled="item.disabled"
        >
          <el-checkbox
            v-for="c in item.options?.data"
            :key="c[item.options?.valueKey || 'value']"
            :label="c[item.options?.valueKey || 'value']"
          >
            {{ c[item.options?.labelkey || "label"] }}
          </el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <!-- 下拉框 -->
      <el-form-item
        :label="item.label"
        v-else-if="item.type === 'select'"
        :rules="item.fules"
        :prop="[item.field]"
      >
        <el-select
          v-model="model[item.field]"
          :placeholder="item.options?.placeholder || '请选择'"
          :clearable="'item.clearable'"
        >
          <el-option
            v-for="s in item.options?.data"
            :key="s[item.options?.valueKey || 'value']"
            :label="s[item.options?.labelkey || 'label']"
            :value="s[item.options?.valueKey || 'value']"
          />
        </el-select>
      </el-form-item>
      <!-- 输入框 -->
      <el-form-item
        :label="item.label"
        :rules="item.rules"
        :prop="[item.field]"
        v-else
      >
        <el-input
          v-model="model[item.field]"
          :readonly="item.readonly"
          :type="item.type ?? 'text'"
          :placeholder="item.placeholder || item.label"
          :disabled="item.disabled"
          :showPassword="item.showPassword"
          :clearable="item.clearable"
          @keyup.enter="handleKeyUp(item.enterable)"
        />
      </el-form-item>
    </template>
    <el-form-item>
      <slot name="buttons" :model="model" :formRef="formRef">
        <el-button type="primary" @click="onSubmit(formRef)">
          {{ _options.submitButtonText }}
        </el-button>
        <el-button
          v-if="_options.showResetButton"
          type="info"
          @click="resetForm(formRef)"
        >
          {{ _options.resetButtonText }}
        </el-button>
        <el-button v-if="_options.showCancelButton" @click="emit('cancel')">
          {{ _options.cancelButtonText }}
        </el-button>
      </slot>
    </el-form-item>
  </el-form>
</template>

<script setup>
const formRef = ref();
const props = defineProps({
  fieldList: Array,
  model: Object,
  options: Object,
});

const _options = computed(() => {
  const option = {
    labelPosition: "right",
    disabled: false,
    submitButtonText: "提交",
    resetButtonText: "重置",
    cancelButtonText: "取消",
  };
  return Object.assign(option, props?.options);
});

const emit = defineEmits();
defineExpose({
  formRef,
});

// 提交按钮
const onSubmit = (formEl) => {
  if (!formEl) return;
  formEl.validate((valid) => {
    if (valid) {
      emit("submit", props.model);
    } else {
      return false;
    }
  });
};
//输入框回车事件
const handleKeyUp = (enterable) => {
  if (!enterable) return;
  onSubmit(formRef.value);
};
// 重置
const resetForm = (formEl) => {
  if (!formEl) return;
  formEl.resetFields();
};
</script>

<style lang="scss" scoped></style>
